<template>
  <div class="com-container" @dblclick="revertMap">
    <div id="map_container">
    </div>
  </div>
</template>

<script>
import indexdata from '@/api/data/indexdata'

export default {
  mounted () {
    this.init()
  },
  methods: {
    async init(){
      const map = initMap();
      map.setMapStyleV2({
        styleId: 'c1da7b4f875a03d348e5815474fbd645'
      })
      var point = new BMapGL.Point(111.53150107458083,27.386223302041344);
      map.centerAndZoom(point, 7);
      const data = []
      const res = await indexdata.getFigureLocAndLat()
      const pointList = res.data.FigureLocAndLatList
      pointList.forEach(item=>{
        data.push({
          geometry: {
            type: 'Point',
            coordinates: [item.lng, item.lat]
          },
          properties: {
            count: parseInt(4 * Math.random(), 10)
          }
        });
      })

      var view = new mapvgl.View({
        map: map
      });

      var pointLayer = new mapvgl.PointLayer({
        blend: 'lighter',
        size: 15,
        color: function (item) {
          return 'rgb(191, 67, 66, 0.8)';
        }
      });
      view.addLayer(pointLayer);
      pointLayer.setData(data);
      console.log(data)
    }
  }
}
</script>

<style scoped>
#map_container {
  width: 100%;
  height: 100%;
}
</style>
